<template>
<van-overlay class="share-tips" :show="isShow" @click="close">
  <div class="tips-content">
    <span>
      <em>点击</em>右上角，<em>分享</em>当前页面
    </span>
  </div>
</van-overlay>
</template>

<script>
import {
  Overlay,
} from "vant";

export default {
  name: 'share-overlay',
  components: {
    [Overlay.name]: Overlay,
  },

  props: {
    show: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      isShow: false
    }
  },
  watch: {
    show(nw) {
      nw && (this.isShow = true)
    }
  },
  methods: {
    close() {
      this.isShow = false
      this.$parent.shareTips && (this.$parent.shareTips = false)
    }
  },
}
</script>

<style lang="less" scoped>
@import "~@style_m/basic/utils/index";

.share-tips {
  z-index: 3031 !important;

  .tips-content {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 640px;
    text-align: center;
    padding-top: 105px;

    &::before {
      content: '';
      position: absolute;
      height: 100px;
      top: 0;
      left: 20px;
      right: 20px;
      width: 80%;
      background: url(/static/images/common/share_page-1.png) no-repeat right center;
      background-size: 80px auto
    }

    span {
      background: url(/static/images/common/share_page-2.png) no-repeat center;
      background-size: 100%;
      color: #fff;
      padding: 10px 17.5px;
      font-size: 21px;

      em {
        color: #ffd52b;
      }
    }
  }
}
</style>
